<template>
   <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item>优惠券</el-breadcrumb-item>
         <el-breadcrumb-item :to="{ path: '/shop/tickets' }">优惠券列表</el-breadcrumb-item>
         <el-breadcrumb-item>编辑优惠券</el-breadcrumb-item>
      </el-breadcrumb>

      <div class="hengxian"></div>

      <el-form :model="ticket" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
               v-loading="loading">
         <el-form-item label="名称" prop="title">
            <el-input size="mini" v-model="ticket.title" placeholder="请输入优惠券名称"></el-input>
         </el-form-item>
         <el-form-item label="缩略图" prop="image">
            <el-upload class="avatar-uploader" action="/photos" :show-file-list="false"
                       :on-success="handleAvatarSuccess"
                       :before-upload="beforeAvatarUpload">
               <img v-if="ticket.image" :src="ticket.image" class="avatar">
               <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
         </el-form-item>
         <el-form-item label="使用范围" prop="used">
            <el-radio-group v-model="ticket.used">
               <el-radio v-for="(item,index) in used" :key="index" :label="index">{{item}}</el-radio>
            </el-radio-group>
         </el-form-item>
         <el-form-item label="使用类型" prop="type">
            <el-radio-group v-model="ticket.type">
               <el-radio v-for="(item,index) in type" :key="index" :label="index">{{item}}</el-radio>
            </el-radio-group>
         </el-form-item>
         <el-form-item label="满额" prop="with_amount">
            <el-input size="mini" v-model="ticket.with_amount" placeholder="请输入优惠券满额"></el-input>
         </el-form-item>
         <el-form-item label="用券金额" prop="used_amount">
            <el-input size="mini" v-model="ticket.used_amount" placeholder="请输入用券金额"></el-input>
         </el-form-item>
         <el-form-item label="发券数量" prop="number">
            <el-input size="mini" v-model="ticket.number" placeholder="请输入发券数量"></el-input>
         </el-form-item>
         <el-form-item label="使用时间" prop="valid_start_time">
            <el-date-picker v-model="ticket.valid_start_time" size="mini" type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择使用时间"></el-date-picker>
         </el-form-item>
         <el-form-item label="结束时间" prop="valid_end_time">
            <el-date-picker v-model="ticket.valid_end_time" size="mini" type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择结束时间"></el-date-picker>
         </el-form-item>
         <el-form-item label="有效期" prop="valid_days">
            <el-input-number v-model="ticket.valid_days" size="mini" @change="handleChange" :min="1"
                             :max="30"></el-input-number>
         </el-form-item>
         <el-form-item label="状态" prop="status">
            <el-radio-group v-model="ticket.status">
               <el-radio v-for="(item,index) in status" :key="index" :label="index">{{item}}</el-radio>
            </el-radio-group>
         </el-form-item>

         <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')" size="mini">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')" size="mini">重置</el-button>
         </el-form-item>
      </el-form>
   </div>
</template>

<script>
   export default {
      name: "Create",
      data() {
         return {
            loading: false,
            used: [],
            type: [],
            status: [],
            ticket: {
               update_user: admin.name
            },
            rules: {
               title: [
                  {required: true, message: '请输入优惠券名称', trigger: 'change'}
               ],
               image: [
                  {required: true, message: '请上传缩略图', trigger: 'change'}
               ],
            }
         }
      },
      created() {
         const id = this.$route.params.id;
         axios.get(`/admin/shop/tickets/${id}`)
            .then((res) => {
               this.ticket = res.data.ticket;
               this.used = res.data.used;
               this.type = res.data.type;
               this.status = res.data.status;
            })
      },
      methods: {
         //有效期
         handleChange(value) {
            console.log(value);
            this.ticket.valid_days = value;
         },
         //图片上传
         handleAvatarSuccess(res, file) {
            this.ticket.image = res.msg;
         },
         beforeAvatarUpload(file) {
            const arr = ['image/jpeg', 'image/png', 'image/gif'];
            // const isJPG = file.type === 'image/jpeg';
            const isJPG = arr.includes(file.type);
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
               this.$message.error('上传图片只能是 JPG/PNG/GIF 格式!');
            }
            if (!isLt2M) {
               this.$message.error('上传图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
         },
         //表单提交
         submitForm(formName) {
            this.$refs[formName].validate((valid) => {
               if (valid) {
                  console.log(this.ticket);
                  axios.put(`/admin/shop/tickets/${this.ticket.id}`, this.ticket)
                     .then((res) => {
                        if (res.data.status == 1) {
                           this.$message({
                              showClose: true,
                              message: res.data.msg,
                              type: 'success'
                           });
                           this.$router.push('/shop/tickets');
                           this.$refs[formName].resetFields();   //重置表单
                        } else {
                           this.$message.error(res.data.msg);
                        }
                     })
               } else {
                  console.log('error submit!!');
                  return false;
               }
            });
         },
         resetForm(formName) {
            this.$refs[formName].resetFields();
         },
      }
   }
</script>

<style scoped>

</style>